<template>
    <div class="common-layout">
        <el-container>
            <el-header style="border: 2px solid #dddddd;height: 80px;margin-bottom: 10px;">
                <el-row style="margin-top: 20px;">
                    <el-input placeholder="请输入类别名称" v-model="c.typeName" style="width: 240px;"></el-input>
                    <el-button type="primary" @click="getShow()">查询</el-button>
                </el-row>
            </el-header>
            <el-container style="height: 810px;">
                <el-aside width="200px" style="border: 2px solid #dddddd;margin-right: 10px;">
                    <el-input v-model="filterText" class="w-60 mb-2" placeholder="关键词" />
                    <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data"
                        :props="defaultProps" default-expand-all :filter-node-method="filterNode"
                        @node-click="handleNodeClick" :expand-on-click-node="false" />
                </el-aside>
                <el-main style="border: 2px solid #dddddd;">
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column type="index" width="55" label="序号" />
                        <el-table-column prop="typeId" label="类别编号" />
                        <el-table-column prop="typeName" label="类别名称" />
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { read } from '../../stores/host'
import {type TreeInstance } from 'element-plus'
// 获取数据
onMounted(()=>{
    getShow()
    GetTree()
})
const c=reactive({
    typeName: ''
})
// 数据
const tableData = ref([])
// 获取数据
const getShow=()=>{
    read.get("/inventoryread/api/Inventory/GetType",{params:{typeName:c.typeName}}).then(res=>{
        tableData.value = res.data.data
    })
}

//树型
const handleNodeClick = (data: any) => {
    debugger
    console.log(data)
    c.typeName=data.label
    getShow()
}
const filterText = ref('')
const treeRef = ref<TreeInstance>()

const defaultProps = {
    children: 'children',
    label: 'label',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value: string, data: any) => {
    if (!value) return true
    return data.label.includes(value)
}
const data = ref([])
const GetTree = () => {
    read.get("/inventoryread/api/Inventory/TreeType").then(res => {
        data.value = res.data.data
    })
}
</script>